<template>
	<view class="search-box">
		<my-search @click="goSearch"></my-search>
	</view>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" indicator-active-color="#ffffff" :duration="1000" :circular="true">
			<swiper-item v-for="(item,i) in swiperList" :key="i">
				<navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id">
					<image :src="item.image_src"></image>
				</navigator>
			</swiper-item>
		</swiper>
	</view>
	<!-- 导航列表 -->
	<view class="nav_list">
		<view class="nav_item" v-for="(item, index) in navList" :key="index+'c'" @click="changePage(item)">
			<image :src="item.image_src"></image>
		</view>
	</view>
	<!-- 楼层区域 -->
	<view class="floor-list">
		<view class="floor-item" v-for="(item, index) in floorList" :key="index+'b'">
			<view class="floor-title">
				<image :src="item.floor_title.image_src" mode=""></image>
			</view>
			<view class="floor-box">
				<!--左边大盒子-->
				<navigator class="floor-left" :url="item.product_list[0].navigator_url">
					<image :src="item.product_list[0].image_src" mode="widthFix" :style="{width:item.product_list[0].image_width+'rpx'}"></image>
				</navigator>
				<!--右边四个小盒子-->
				<view class="floor-right">
					<template  v-for="(item2, index2) in item.product_list" :key="index2+'a'" >
						<navigator class="floor-right-item" v-if="index2!=0" :url="item2.navigator_url">
							<image :src="item2.image_src" mode="widthFix" :style="{width:item2.image_width+'rpx'}" v-if="index2!==0"></image>
						</navigator>
					</template>
					
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import badgeMixins from "@/mixins/badge.js"
	export default {
		mixins:[badgeMixins],
		data () {
			return{
				swiperList:[], // 顶部轮播图列表
				navList: [], // 导航图片列表
				floorList: [], // 楼层数据
			}
		},
		onLoad(options){
			this.getSwiperList();
			this.getNavList();
			this.getFloorList();
		},
		methods:{
			// 获取顶部导航图片
			async getSwiperList(){
				const {data:res} = await uni.$http.get(uni.api.SWIPER_LIST);
				if(res.meta.status !== 200){
					return uni.$showMsg()
				}
				this.swiperList = res.message
			},
			// 获取导航列表
			async getNavList(){
				const {data: res} = await uni.$http.get(uni.api.NAV);
				if(res.meta.status!== 200) return uni.$showMsg();
				this.navList = res.message
			},
			// 导航点击切换页面
			changePage(item){
				// 切换到分类页面
				if(item.name=='分类'){
					uni.switchTab({
						url:'/pages/cate/cate'
					})
				}
			},
			// 获取楼层列表
			async getFloorList(){
				const {data:res} = await uni.$http.get(uni.api.FLOOR_DATA)
				if(res.meta.status !== 200) return uni.$showMsg();
				res.message.forEach(item=>{
					item.product_list.forEach(mark=>{
						mark.navigator_url = '/subpkg/goods_list/goods_list?'+mark.navigator_url.split('?')[1]
					})
				})
				this.floorList = res.message;
			},
			// 去搜索页面
			goSearch(){
				uni.navigateTo({
					url:'/subpkg/search/search'
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #fff;
	}
	.search-box{
		position: sticky;
		top: 0;
		z-index: 999;
	}
	/* 顶部轮播图样式 */
	swiper{
		height: 330rpx;
	}
	.swiper-item, image{
		width: 100%;
		height: 100%;
	}
	/* 导航列表样式 */
	.nav_list{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin: 15px 0;
	}
	.nav_list image{
		width: 128rpx;
		height: 140rpx;
	}
	/* 楼层导航 */
	.floor-list{
		margin-bottom: 15px;
	}
	
	.floor-title image{
		width: 100%;
		height: 60rpx;
	}
	.floor-box{
		display: flex;
		flex-direction: row;
	}
	.floor-box .floor-left{
		margin-left: 5px;
	}
	.floor-box .floor-right{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}
</style>